<template>
  <view class="matches">
    <view class="header">
      <image class="titleIcon" v-if="titleIcon" :src="titleIcon" />
      <text class="title">{{ title }}</text>
    </view>

    <swiper class="body" v-if="list.length > 0" indicator-dots indicator-active-color="#fb7299">
      <swiper-item class="swiperItem" v-for="(item, index) in newList" :key="index">
        <view class="item" v-for="(item2, index2) in item" :key="index2">
          <navigator :url="'/pages/video/index?roomId=' + item2.id" class="imageBox">
            <image class="image" :src="item2.gameBgIcon" />
            <!-- 状态: 0 未开赛 1正在热播 2 比赛结束 -->
            <view v-if="item2.status === 0" class="imgTag imgPlay" style="background-color: #72d6db;">
              <text class="imgTagText">{{ item2.beginTime | dateFormat("HH:mm") }}</text>
            </view>
            <view v-if="item2.status === 1" class="imgTag" style="background-color: #fc5d77;"><text class="imgTagText">正在热播</text></view>
            <view v-if="item2.status === 2" class="imgTag" style="background-color: #eeeeee;color: #000000;"><text class="imgTagText">已结束</text></view>
            <!-- 比分 -->
            <view class="scoreBox">
              <view class="score">
                <image class="scoreImage" :src="IMAGES.VIDEO_VS_02" />
                <text class="teamAScore">{{ item2.status === 0 ? "V" : item2.teamAScore }}</text>
                <text class="teamBScore">{{ item2.status === 0 ? "S" : item2.teamBScore }}</text>
              </view>
            </view>
            <!-- 比赛信息 -->
            <view class="matchInfo">
              <ly-avatar size="28rpx" :src="item2.gameIcon" />
              <view class="matchTitle">{{ item2.matchName }}</view>
            </view>
          </navigator>
          <view class="vs">{{ item2.teamAName }} VS {{ item2.teamBName }}</view>
        </view>
      </swiper-item>
    </swiper>

    <view class="body noneData" v-else>
      <slot name="none"><text style="font-size: 24rpx;">{{ none }}</text></slot>
    </view>
  </view>
</template>
<script>
import { arraySplit } from "@/utils";
import { IMAGES } from "@/config/resources";
import LyAvatar from "@/lyui/ly-avatar/avatar";
export default {
  components: {
    LyAvatar
  },
  name: "matches",
  props: {
    titleIcon: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "热门"
    },
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    none: {
      type: String,
      default: "没有数据"
    }
  },
  computed: {
    IMAGES: () => IMAGES,
    newList() {
      return arraySplit(this.list, 3);
    }
  }
};
</script>

<style lang="scss">
$width: 700;
.matches {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 20rpx 10rpx;
}
.title {
  width: #{$width - 30}rpx;
  font-size: 32rpx;
}
.titleIcon {
  width: 32rpx;
  height: 40rpx;
  margin-right: 10rpx;
}
.body {
  width: #{$width}rpx;
  height: 360rpx;
}
// 没有数据
.noneData {
  text-align: center;
  height: 60rpx;
}
.noneDataText{
  font-size: 24rpx;
  color: #EEEEEE;
}
.swiperItem {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  height: 360upx;
}
.item {
  width: #{$width / 3}rpx;
  padding: 0 10rpx;
  border-radius: 12rpx;
  overflow: hidden;
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
}
.imageBox {
  height: 280rpx;
  position: relative;
}
.image {
  /* #ifdef APP-PLUS-NVUE */
  height: 280rpx;
  /* #endif */
  /* #ifndef APP-PLUS-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
}
.imgTag {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  border-radius: 4rpx;
  overflow: hidden;
}
.imgTagText {
  color: #ffffff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
}
.scoreBox{
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
}
.score {
  margin-top: -170rpx;
  width: 124rpx;
  height: 117rpx;
  color: #ffffff;
  position: relative;
}
.teamAScore,
.teamBScore {
  position: absolute;
  font-size: 50rpx;
  /* #ifndef APP-PLUS-NVUE */
  text-shadow: 2rpx 2rpx 0 #f28b18;
  /* #endif */
  font-style: italic;
  width: 28rpx;
  font-weight: bold;
}
.teamAScore {
  left: 30rpx;
  top: 14rpx;
}
.teamBScore {
  right: 23rpx;
  bottom: 25rpx;
}

.scoreImage {
  width: 124rpx;
  height: 117rpx;
}

.matchInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 10rpx 0 10rpx 5rpx;
  overflow: hidden;
}
.matchTitle {
  width: #{$width / 3 - 36}rpx;
  color: #ffffff;
  font-size: 24rpx;
  margin-left: 5rpx;
  @include line-clamp(1);
}

.vs {
  color: #4a4a4a;
  line-height: 28rpx;
  line-height: 40rpx;
  @include line-clamp(1);
}
</style>
